<template>
   
    <div class="side-bar">
		<div class="top-part">
			<div class="title-wrap">
				<img src="../assets/skylogo.png" alt="">
				<div class="logo-desc">
					固定资产
				</div>
			</div>
			
			<div class="side-user-wrap">
				<div class="switch-part">
					<img src="../assets/sysswitch.png" alt="">
				</div>
				<div class="user-wrap">
					<img src="../assets/sideuser.png" alt="">
				</div>
				<div class="user-wrap">
					{{userInfo.username}}
				</div>
				<div class="user-info-wrap">
					<div class="left-part">
						<div class="label-top">部门</div>
						<div>{{userInfo.officeName}}</div>
					</div>
					<div class="line-splid">
						
					</div>
					<div class="right-part">
						<div class="label-top">职务</div>
						<div>--</div>
					</div>
				</div>
			</div>
			<div class="switch-year">
				<div style="width:43px">
					年度：
				</div>
				<!-- <div class="opacity">{{nowyear}}</div> -->
				<a-date-picker class="no-bg-picker"  :value-format="YYYY" @change="yearChange"   :autofocus="false" placeholder="" :allowClear="false" v-model:value="nowyear" suffix-icon="[ 切换 ]" picker="year" >[ 切换 ]</a-date-picker>
				<!-- 年度：2023 <span class="click-year">[ 切换 ]</span> -->
			</div>
		</div>
		<div class="menu-part">
			<a-menu
			      v-model:selectedKeys="selectedKeys"
			      style="width: 100%"
				  @click="clickMenu"
				  :triggerSubMenuAction="'click'"
			      mode="inline"
			    >
				 <template v-for="item in menuList">
					<template v-if="!item.children">
						<a-menu-item :key="item.menuUrl">
							<template #icon>
							  <img :src="`/assetSystem/assets/${item.remark}.png`" alt="">
							</template>
							<span>{{ item.menuName }}</span>
						</a-menu-item>
					</template>
					<template v-else>
						
						<a-sub-menu  :key="item.menuUrl">
							<template #icon>
							  <img :src="`/assetSystem/assets/${item.remark}.png`" alt="">
							  
							</template>
							<template #title>{{ item.menuName }}</template>
							<a-menu-item v-for="items in item.children"  :key="items.menuUrl">{{ items.menuName }}</a-menu-item>
						</a-sub-menu>
					</template>
				</template>
				
				
				
				
				
				
				<!-- <a-menu-item key="home">
					<template #icon>
					  <img src="../assets/homemenu.png" alt="">
					</template>
					首页
				</a-menu-item>
				<a-menu-item key="assetsplan">
					<template #icon>
					  <img src="../assets/jihuamenu.png" alt="">
					</template>
					采购计划
				</a-menu-item>
			      <a-sub-menu key="jihuabianzhi">
			        <template #icon>
			          <img src="../assets/zichancaigoumenu.png" alt="">
					  
			        </template>
			        <template #title>资产采购 </template>
			        <a-menu-item key="assetsrecord">采购记录</a-menu-item>
			        <a-menu-item key="checkassets">采购审批</a-menu-item>
					 <a-menu-item key="checkassetshas">已审批采购</a-menu-item>
			       
			      </a-sub-menu>
			      <a-sub-menu key="acceptassets">
			        <template #icon>
						<img src="../assets/zichanyanshou.png" alt="">
					</template>
			        <template #title>
			         
			          资产验收
			        </template>
			        <a-menu-item key="acceptrecord">验收记录</a-menu-item>
			        <a-menu-item key="checkaccept">验收审批</a-menu-item>
					 <a-menu-item key="checkaccepthas">已审批验收</a-menu-item>
					
			      </a-sub-menu>
			      <a-sub-menu key="changeassets">
			        <template #icon>
			          <img src="../assets/zichanbiangeng.png" alt="">
			        </template>
			        <template #title>资产变更</template>
			        <a-menu-item key="usestate">使用情况</a-menu-item>
			        <a-menu-item key="changerecord">变更记录</a-menu-item>
			        <a-menu-item key="checkchange">变更审批</a-menu-item>
					<a-menu-item key="checkchangehas">已审批变更</a-menu-item>
			       
			      </a-sub-menu>
				  
				  <a-sub-menu key="joinassets">
				    <template #icon>
				      <img src="../assets/zichandiaoru.png" alt="">
				    </template>
				    <template #title>资产调入</template>
				   
				    <a-menu-item key="joinrecord">调入记录</a-menu-item>
				    <a-menu-item key="checkjoin">调入审批</a-menu-item>
					 <a-menu-item key="checkjoinhas">调入已审批</a-menu-item>
				   
				  </a-sub-menu>
				  <a-sub-menu key="handleassets">
				    <template #icon>
				      <img src="../assets/zichanchuzhi.png" alt="">
				    </template>
				    <template #title>资产处置</template>
				   
				    <a-menu-item key="handlerecord">处置记录</a-menu-item>
				    <a-menu-item key="checkhandle">处置审批</a-menu-item>
					<a-menu-item key="checkhandlehas">处置已审批</a-menu-item>
				   
				  </a-sub-menu>
				  <a-sub-menu key="manassets">
				    <template #icon>
				      <img src="../assets/zichanguanli.png" alt="">
				    </template>
				    <template #title>资产管理</template>
				   
				    <a-menu-item key="myassets">我的资产</a-menu-item>
					<a-menu-item key="depassets">部门资产</a-menu-item>
					<a-menu-item key="allassets">院资产</a-menu-item>
					
					<a-menu-item key="cardman">资产管理</a-menu-item>
					
					<a-menu-item key="clearassets">资产清查</a-menu-item>
				   
				  </a-sub-menu>
				  
				 
				 
				  
				  <a-sub-menu key="sysman">
				    <template #icon>
				      <img src="../assets/xitongguanli.png" alt="">
				    </template>
				    <template #title>系统管理</template>
					<a-menu-item key="roleman">角色管理</a-menu-item>
				    <a-menu-item key="noticeman">通知公告</a-menu-item>
				    <a-menu-item key="userman">人员管理</a-menu-item>
				    <a-menu-item key="dataword">数据字典</a-menu-item>
					<a-menu-item key="assettypeman">国标大类</a-menu-item>
					<a-menu-item key="menuman">菜单管理</a-menu-item>
				  </a-sub-menu> -->
			    </a-menu>
		</div>
		<div class="bottom-part">
			<div class="logout" @click="logout">
				<img src="../assets/logout.png" alt="">
				<span>注销登录</span>
			</div>
			<div class="author">
				©2023 Hongtu Co.,LTD
			</div>
		</div>
	</div>

</template>

<script>
	import {assetapisystemmenugetMenuListByRole} from '../../api/manpart.js'
import bus from './bus';
import {useRouter} from 'vue-router'
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
import {defineComponent,ref,reactive,toRefs,onMounted} from 'vue'
import dayjs from 'dayjs'
import {useStore} from 'vuex'
export default defineComponent({
	 components: {
	    MailOutlined,
	    AppstoreOutlined,
	    SettingOutlined,
	  },
	setup(){
		
		const $route=useRouter()
		let comyear=dayjs()
		let userInfo={}
		if(localStorage.getItem('ht-new-fixed-user')){
			userInfo=JSON.parse(localStorage.getItem('ht-new-fixed-user'))
		}else{
			
		}
		
		//localStorage.getItem('ht-new-fixed-user')
		let nowyear=ref(comyear)
		const store = useStore();
		const yearChange=()=>{
			store.commit('changenowyear',nowyear.value.format('YYYY'))
		}
		yearChange()
		 
		const state = reactive({
		    openKeys: [''],
		    selectedKeys: ['noticeman'],
		});
		
		
		const onOpenChange= openKeys=>{
			
			
			
			const latestOpenKey = openKeys.find(key => state.openKeys.indexOf(key) === -1);
			
			if (state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
				state.openKeys = openKeys;
			} else {
				state.openKeys = latestOpenKey ? [latestOpenKey] : [];
			}
		}
		
		const clickMenu=item=>{
			store.commit('changepage',{
				currentPage:1,
				pageSize:10
			})
			$route.push({
				path:'/'+item.key
			})
			state.selectedKeys=[item.key]
			
		}
		
		
		const logout=()=>{
			window.location.href=globalVar.tiaozhuanUrl
		}
		
		onMounted(()=>{
			menuList.value=JSON.parse(localStorage.getItem('menuList'))
			callback()
		})
		let menuList=ref([])
		const callback = val => {
			
		  // assetapisystemmenugetMenuListByRole({roleCode:userInfo.role}).then(e=>{
			 // menuList.value=e.object
			  
			  
			 
			  
		  // }).catch(err=>{
			 //  console.log(err)
		  // })
		};
		return{
			menuList,
			userInfo,
			yearChange,
			logout,
			clickMenu,
			...toRefs(state),
			onOpenChange,
			nowyear
		}
	}
})
</script>

<style>
	.no-bg-picker{
		background:none!important;
	}
</style>
<style scoped>
	.side-user-wrap{
		margin: 10px 0;
		padding:10px 0;
		background: url(../assets/sijiaobg.png) no-repeat center;
		background-size:95% 100%;
	}
	
	.bottom-part .author{
		padding-top:10px;
		font-size: 12px;
		color: rgba(255,255,255,0.5);
		display:flex;
		align-items: center;
		justify-content: center;
	}
	.bottom-part .logout img{
		margin-right:10px;
	}
	.bottom-part .logout{
		cursor:pointer;
		display:flex;
		align-items: center;
		justify-content: center;
	}
	.opacity{
		left:70px;
		width:40px;
		position:absolute;
		z-index:99999999;
		height:20px;
		
	}
	.click-year{
		cursor:pointer;
	}
	.switch-year{
		display:flex;
		align-items: center;
		justify-content: center;
		padding-top:8px;
	}
	.user-info-wrap .line-splid{
		margin:0 14px;
		width: 1px;
		height: 34px;
		background: rgba(255,255,255,0.5);
	}
	.user-info-wrap .label-top{
		
		font-size: 12px;
		color:rgba(255,255,255,0.5);
		justify-content: center;
		display:flex;
	}
	.user-info-wrap{
		
		align-items: center;
		margin-top:8px;
		justify-content: center;
		display:flex;
	}
	.user-wrap{
		display:flex;
		justify-content: center;
		align-items: center;
	}
	.switch-part img{
		cursor:pointer;
	}
	.switch-part{
		padding-top:8px;
		padding-right:10px;
		display:flex;
		justify-content: flex-end;
	}
	.side-bar .logo-desc{
		font-family: biaotifix;
		font-size:24px;
		margin-left:9px;
	}
	.side-bar .title-wrap{
		padding-top:16px;
		display:flex;
		justify-content: center;
		align-items: center;
	}
	.side-bar{
		color:#fff;
		position:absolute;
		left:0;
		width:186px;
		height:100%;
		background: linear-gradient(180deg, #55B5FD 0%, #398CFF 100%);
	}
	.bottom-part{
		text-align: center;
		position:absolute;
		bottom:10px;
		width:100%;
		
	}
	
	.menu-part{
		width:100%;
		position:absolute;
		top:265px;
		bottom:100px;
		overflow-y: scroll;
		overflow-x: hidden;
	}
	.top-part{
		text-align: center;
		position:absolute;
		top:0px;
		width:100%;
	}
	
</style>

